<template>
  <div class="butt-list-sty">
    <div v-for="(item, index) in buttonselectlist" :key="index"
      :class="index === selectedindex ? 'basebut1' : 'basebut2'" @click="selbut(index, item)">
      {{ item.virtualSystemName }}
    </div>
  </div>
</template>
<script>
import api from "@/api/user/index.js"

export default {
  props: {},
  data() {
    return {
      selectedindex: 0,
      buttonselectlist: [],
      virtualSystemNameList:['equip','PROCESS','dpManage','traceability','SY-SC','SY-YY']
    }
  },
  created() {
  },
  mounted() {
    this.getlist()
  },
  methods: {
    selbut(i, x) {
      this.selectedindex = i
      this.$emit('nowselectbutton', x)
    },
    async getlist() {
      let { data: buttonselectlist } = await api.queryVirtualSystem(sessionStorage.organizationNo);
      console.log(buttonselectlist);
      this.buttonselectlist = buttonselectlist.filter(item => {
        return this.virtualSystemNameList.indexOf(item.virtualSystemNo)!==-1||item.virtualSystemNo.indexOf('app')||item.virtualSystemNo.indexOf('APP')||item.virtualSystemNo.indexOf('App')
      });
      this.selbut(0, this.buttonselectlist[0]);
    }
  }
}
</script>
<style lang="scss" scoped>
.butt-list-sty {
  width: 100%;
  // height: 30px;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  overflow-y: hidden;

  &::-webkit-scrollbar-thumb {
    width: 6px;
    background: #aaa;
  }
}

.basebut1 {
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  // background-color: transparent;
  background-image: linear-gradient(#0fa1d2, #1087af, #106f8f);
  border: #f6f9f9 1px solid;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  margin-right: 5px;
  white-space: nowrap;
}

.basebut2 {
  display: inline-block;
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background-color: #106986;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  margin-right: 5px;
  white-space: nowrap;
}
</style>
